Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: rework Avatar, User and UserLabel components #1991

Open
wants to merge 1 commit into
base: next
Choose a base branch
from

Conversation

DakEnviy
Copy link
Contributor

@DakEnviy DakEnviy commented Dec 12, 2024

Ticket: DATAUI-2913

Breaking changes

Avatar

  • One of the following properties is required: imgUrl, icon or text
  • Change the size of the text for s size
  • Change the border width for 2xs size

User

  • Change the gap between the avatar and text for m size
  • Change font size for xl size

UserLabel

  • Replace children property with text
  • Change all gaps and font sizes
  • Add a border for avatar

Features

Avatar

  • Add 3xs size
  • Support all AriaLabelingProps
  • Add --g-avatar-border-width, --g-avatar-inner-border-width and --g-avatar-font-weight to CSS API

User

  • Add 3xs size
  • Support all AriaLabelingProps
  • Rework CSS API (replace all the variables with new ones)
  • Support string as an avatar property

UserLabel

  • Add 3xs and 2xs sizes
  • Add description property
  • Rework CSS API (replace all the variables with new ones)

@DakEnviy DakEnviy requested a review from amje December 12, 2024 20:28
@gravity-ui-bot
Copy link
Contributor

Preview is ready.

@gravity-ui-bot
Copy link
Contributor

Visual Tests Report is ready.

src/components/Avatar/types/main.ts Outdated Show resolved Hide resolved
src/components/User/README.md Outdated Show resolved Hide resolved
src/components/User/index.ts Show resolved Hide resolved
@DakEnviy DakEnviy force-pushed the feat/new-avatar-sizes branch from 9c488e7 to 4c23e0b Compare December 15, 2024 12:43
@DakEnviy DakEnviy changed the title WIP: rework user components and add 3xs size feat!: rework Avatar, User and UserLabel components Dec 15, 2024
@DakEnviy DakEnviy force-pushed the feat/new-avatar-sizes branch 2 times, most recently from 387a2ec to b6b7654 Compare December 17, 2024 10:34
@DakEnviy DakEnviy requested a review from amje December 17, 2024 15:17
@DakEnviy DakEnviy force-pushed the feat/new-avatar-sizes branch from b6b7654 to c2dec6b Compare December 17, 2024 17:41
&__icon {
color: var(--g-avatar-color, var(--_--color));

& > svg {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why we need it? Looks unreliable

@@ -1,6 +1,7 @@
@use 'sass:map';

$sizes: (
'3xs': 16px,
'2xs': 20px,
'xs': 24px,
's': 28px,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought that we wanted to change this sizes like in Button?

| `--g-user-line-height` | Name and description line height |
| Name | Description |
| :--------------------------------- | :-------------------------------- |
| `--g-user-gap` | Gap between avatar and text block |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about --g-user-avatar-offset name for this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants